<template>
	<view class="interwork">
		<!-- 头部 -->
		<view class="interwork-header">
			<!-- 内容 -->
			<view class="interwork-header-box">
				<view>
					<text class="iconfont interwork-header-box-title" @tap="goHome">&#xe614;</text>
					<text>百事通</text>
				</view>
				<view>
					<text class="iconfont" @tap="changeCompany">&#xeb86;</text>
					<text class="iconfont" @tap="openAddView">&#xe661;</text>
				</view>
			</view>
		</view>
		<!-- 快捷菜单 -->
		<view class="interwork-menu">
			<view>
				<text class="iconfont">&#xe65e;</text>日历
			</view>
			<view>
				<text class="iconfont big">&#xeb29;</text>待办
			</view>
			<view>
				<text class="iconfont big">&#xe669;</text>组织
			</view>
		</view>
		<!-- 组织群聊信息 -->
		<view class="interwork-chart">
			<view class="interwork-chart-box">
				<view>
					<image src="../../static/image/contacts/userlogo2.jpg" mode="scaleToFill"></image>
					<view>
						<view>
							<text>工作通知：百事通</text><text>下午3:35</text>
						</view>
						<view>
							智能填表:每日健康打卡
						</view>
					</view>
				</view>
				<view>
					<image src="../../static/image/contacts/userlogo4.jpg" mode="scaleToFill"></image>
					<view>
						<view>
							<text>百事通研发部</text><text>下午2:35</text>
						</view>
						<view>
							玄戈: @霓裳 策划书这周三能写完么
						</view>
					</view>
				</view>
				<view>
					<image src="../../static/image/contacts/userlogo3.jpg" mode="scaleToFill"></image>
					<view>
						<view>
							<text>百事通人事部</text><text>下午1:35</text>
						</view>
						<view>
							北洛: 哈哈哈
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 操作菜单 -->
		<view class="interwork-option">
			<!-- 我的常用 -->
			<view>
				<view><text>我的常用<text class="iconfont">&#xe60a;</text></text> <text class="editor">编辑</text></view>
				<view>
					<view>
						<text class="iconfont">&#xe608;</text>
						<view>
							打卡
						</view>
					</view>
					<view>
						<text class="iconfont yellow">&#xe62d;</text>
						<view>
							日报
						</view>
					</view>
				</view>
			</view>
			<!-- 经营统计 -->
			<view>
				<view><text>经营统计<text class="iconfont">&#xe60a;</text></text></view>
				<view>
					<view>
						<text class="iconfont gray">20</text>
						<view>
							考勤统计
						</view>
					</view>
					<view>
						<text class="iconfont gray">0</text>
						<view>
							待我审批
						</view>
					</view>
				</view>
			</view>
			<!-- 远程办公 -->
			<view>
				<view><text>远程办公<text class="iconfont">&#xe60a;</text></text></view>
				<view>
					<view>
						<text class="iconfont">&#xe7c4;</text>
						<view>
							云端办公室
						</view>
					</view>
					<view>
						<text class="iconfont green">&#xe66b;</text>
						<view>
							视频会议
						</view>
					</view>
					<view>
						<text class="iconfont yellow">&#xe64b;</text>
						<view>
							员工健康
						</view>
					</view>
					<view>
						<text class="iconfont origin">&#xe67d;</text>
						<view>
							群直播
						</view>
					</view>
					<view>
						<text class="iconfont">&#xe608;</text>
						<view>
							考勤打卡
						</view>
					</view>
				</view>
			</view>
			<!-- 内外勤管理 -->
			<view>
				<view><text>内外勤管理<text class="iconfont">&#xe60a;</text></text></view>
				<view>
					<view>
						<text class="iconfont yellow">&#xe68b;</text>
						<view>
							出勤
						</view>
					</view>
					<view>
						<text class="iconfont">&#xe623;</text>
						<view>
							请假
						</view>
					</view>
					<view>
						<text class="iconfont">&#xe66a;</text>
						<view>
							出差
						</view>
					</view>
					<view>
						<text class="iconfont origin">&#xe680;</text>
						<view>
							审批
						</view>
					</view>
				</view>
			</view>
			<!-- 业务汇报 -->
			<view>
				<view><text>业务汇报<text class="iconfont">&#xe60a;</text></text></view>
				<view>
					<view>
						<text class="iconfont yellow">&#xe62d;</text>
						<view>
							日报
						</view>
					</view>
					<view>
						<text class="iconfont">&#xe62c;</text>
						<view>
							周计划
						</view>
					</view>
					<view>
						<text class="iconfont green">&#xe652;</text>
						<view>
							周报
						</view>
					</view>
					<view>
						<text class="iconfont blue">&#xe625;</text>
						<view>
							演示申请
						</view>
					</view>
					<view>
						<text class="iconfont blue">&#xe648;</text>
						<view>
							会议记录
						</view>
					</view>
				</view>
			</view>
			<!-- 审批 -->
			<view>
				<view><text>审批<text class="iconfont">&#xe60a;</text></text></view>
				<view>
					<view>
						<text class="iconfont yellow">&#xe65d;</text>
						<view>
							合同审批
						</view>
					</view>
					<view>
						<text class="iconfont red">&#xe62b;</text>
						<view>
							备用金申请
						</view>
					</view>
					<view>
						<text class="iconfont">&#xe607;</text>
						<view>
							付款申请
						</view>
					</view>
					<view>
						<text class="iconfont red">&#xe63d;</text>
						<view>
							投标保证金
						</view>
					</view>
					<view>
						<text class="iconfont green">&#xe61a;</text>
						<view>
							借款单
						</view>
					</view>
					<view>
						<text class="iconfont green">&#xe6d1;</text>
						<view>
							离职申请单
						</view>
					</view>
					<view>
						<text class="iconfont">&#xe61e;</text>
						<view>
							发表申请
						</view>
					</view>
					<view>
						<text class="iconfont red">&#xe62b;</text>
						<view>
							报销
						</view>
					</view>
					<view>
						<text class="iconfont">&#xe648;</text>
						<view>
							通用审批
						</view>
					</view>
				</view>
			</view>
			<!-- 办公通讯 -->
			<view>
				<view><text>办公通讯<text class="iconfont">&#xe60a;</text></text></view>
				<view>
					<view>
						<text class="iconfont green">&#xe65d;</text>
						<view>
							电话会议
						</view>
					</view>
					<view>
						<text class="iconfont green">&#xe66b;</text>
						<view>
							视频会议
						</view>
					</view>
					<view>
						<text class="iconfont green">&#xe7c4;</text>
						<view>
							智能办公
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			/* 返回首页 */
			goHome: function() {
				console.log(1);
				uni.switchTab({
					url: '../index/index'
				})
			},
			/* 切换组织 */
			changeCompany: function() {
				console.log('切换组织')
			},
			/* 打开新增(任务、组织、订单)界面 */
			openAddView: function() {
				console.log('打开新增(任务、组织、订单)界面 ')
			},
		}
	}
</script>

<style scoped lang="less">
	/* 引入color.less */
	@import url("../../static/color.less");

	/* 引入fontSize.less */
	@import url("../../static/fontSize.less");

	/* 主体 */
	.interwork {
		background-color: #F5F5F5;
	}

	/* 头部 */
	.interwork-header {
		height: 150rpx;
		position: sticky;
		top: 0;
		background-color: @masterColor;
		z-index: 900;

		/* 内容 */
		.interwork-header-box {
			display: flex;
			width: 100%;
			height: 100rpx;
			position: absolute;
			bottom: 0;
			left: 0;
			color: @colorWrite;
			align-items: center;
			justify-content: space-between;

			view {
				&:first-child {
					width: 564rpx;
					font-size: @fontBigger;
					/* 标题 */
					.interwork-header-box-title {
						padding-left: 34rpx;
						font-size: @fontBigger;
					}
					&>text:last-child{
						white-space:nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}

				&:last-child {
					width: 186rpx;
				}

				display: flex;
				align-items: center;
			}

			/* iconfont */
			.iconfont {
				margin: 0 25rpx 0 13rpx;
				font-weight: bold;
				font-size: 55rpx;
			}
		}
	}

	/* 快捷菜单 */
	.interwork-menu{
		display: flex;
		padding: 35rpx 0;
		color: #7A818B;
		background-color: @colorWrite;
		&>view{
			display: flex;
			width: 250rpx;
			height: 35rpx;
			align-items: center;
			justify-content: center;
			&:nth-child(2){
				box-sizing: border-box;
				border-right: 2rpx solid #ECEDEF;
				border-left: 2rpx solid #ECEDEF;
			}
			text{
				font-size: @fontBig;
				margin-right: 15rpx;
				&.big{
					font-size: @fontBigger;
				}
			}
		}
	}

	/* 组织群聊信息 */
	.interwork-chart{
		background-color: @colorWrite;
		.interwork-chart-box{
			width: 716rpx;
			margin-left: 34rpx;
			border-top: 1rpx solid #ECEDEF;
			&>view{
				display: flex;
				height: 120rpx;
				align-items: center;
				image{
					width: 98rpx;
					height: 98rpx;
					margin-right: 18rpx;
					border: 1rpx solid #EEF0EF;
					border-radius: 40rpx;
				}
				&>view{
					width: 564rpx;
					color: #A4A8A9;
					&>view:first-child{
						display: flex;
						justify-content: space-between;
						&>text:first-child{
							display: block;
							width: 436rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space:nowrap;
							color: #111F2C;
							font-size: @fontBig;
							font-weight: 500;
						}
						&>text:last-child{
							display: block;
							width: 127rpx;
							font-size: @fontSmall;
							text-align: right;
						}
					}
				}
			}
		}
	}

	/* 操作菜单 */
	.interwork-option{
		margin-top: 15rpx;
		background-color: @colorWrite;
		&>view{
			padding: 20rpx 30rpx 10rpx;
			color: #A1A7AC;
			&>view:first-child{
				display: flex;
				justify-content: space-between;
				margin-bottom: 28rpx;
				color: #666F78;
				font-weight: 500;
				font-size: @fontBase;
				text-indent: 20rpx;
				&>text.editor{
					color: #50AFFF;
				}
				&>text text{
					margin-left: 8rpx;
					font-size: @fontBase;
				}
			}
			&>view:last-child{
				display: flex;
				flex-wrap: wrap;
				&>view{
					display: flex;
					margin-bottom: 15rpx;
					width: 20%;
					flex-wrap: wrap;
					justify-content: center;
					&>text{
						display: block;
						margin-bottom: 5rpx;
						width: 88rpx;
						height: 88rpx;
						line-height: 88rpx;
						text-align: center;
						font-size: @fontBiggest;
						color: @colorWrite;
						background-color: #3396FC;
						border-radius: 36rpx;
						&.yellow{
							background-color: #FEAC00;
						}
						&.green{
							background-color: #15BC84;
						}
						&.origin{
							background-color: #FF943D;
						}
						&.blue{
							background-color: #4DA9EC;
						}
						&.red{
							background-color: #F25542;
						}
						&.gray{
							color: #747D86;
							background-color: #F3F4F6;
						}
					}
					&>view{
						width: 100%;
						text-align: center;
						font-size: @fontSmall;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}
		}
	}
</style>
